<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        background-color: rgb(213, 221, 238);
        border-radius: 20px;
        display: block;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <canvas width="500px" height="500px"></canvas>
    <script>
      var can = document.getElementsByTagName("canvas")[0], //画布
        cxt = can.getContext("2d"); //canvas对象---画笔
      // 绘制线条的函数
      // x1,y1起点坐标，x2,y2终点坐标，color颜色，width线条粗细
      function line(x1, y1, x2, y2, color, width) {
        cxt.beginPath(); //开始路径
        cxt.moveTo(x1, y1); //起点
        cxt.lineTo(x2, y2); //终点
        cxt.strokeStyle = color; //线条颜色
        cxt.lineWidth = width; //线条粗细
        cxt.closePath(); //结束路径
        cxt.stroke(); //绘制
      }

      // 刻度
      //   num 刻度的个数
      //   deg 旋转的角度
      //   y1 起点纵坐标,
      //   y2 终点纵坐标,
      function mark(num, deg, y1, width) {
        for (var i = 0; i < num; i++) {
          cxt.save();
          cxt.translate(250, 250);
          cxt.rotate((i * deg * Math.PI) / 180);
          line(0, y1, 0, -190, "rgb(85, 65, 76)", width);
          cxt.restore();
        }
      }
      // 指针
      // time 时 分 秒
      //  deg 旋转的角度
      //  color 颜色
      //  y2 终点纵坐标,
      //  width 宽度
      function needle(time, y2, deg, color, width) {
        cxt.save();
        cxt.translate(250, 250);
        cxt.rotate((time * deg * Math.PI) / 180);
        line(0, 0, 0, y2, color, width);
        cxt.restore();
      }

      function clock() {
        //清除矩形画布上的内容 否则秒针会重复
        cxt.clearRect(0, 0, 500, 500);
        mark(12, 30, -170, 8);
        mark(72, 6, -180, 6);
        var today = new Date(),
          hour = today.getHours(),
          min = today.getMinutes(),
          sec = today.getSeconds();
        // 把分针转换成小时 添加给小时
        hour += min / 60;
        needle(hour, -110, 30, "rgb(85, 65, 76)", 8);
        needle(min, -130, 6, "black", 6);
        needle(sec, -160, 6, "rgb(229, 93, 93)", 3);
      }
      clock();
      setInterval(clock, 1000);
    </script>
  </body>
</html>
